<template>
  <div class="login">
    <div class="login-header">
      <p>让每个人都能享受科技的乐趣</p>
    </div>
    <div class="login-content">
      <h3>小米账号登录</h3>
      <div v-if="isShow">
        <!-- 用户邮箱登录 -->
        <div class="login-user">
          <div class="login-form">
            <form action="" onsubmit="return false;">
              <input
                type="tel"
                placeholder="邮箱/手机号码/小米ID"
                pattern="[0-9]{11}"
                v-model="userName"
              />
              <input
                type="password"
                placeholder="请输入密码"
                v-model="userPwd"
                autocomplete
              />
            </form>
            <div class="login-info">
              <button @click="loginBtn">登录</button>
            </div>
          </div>
          <div class="login-text">
            <span @click="userLogin">手机号登录</span> |
            <span>立即注册</span>
          </div>
        </div>
      </div>
      <div v-else>
        <!-- 手机号登录 -->
        <div class="login-tel">
          <div class="login-form">
            <form action="" onsubmit="return false;">
              <input type="tel" placeholder="手机号码" pattern="[0-9]{11}" v-model="userTel"/>
            </form>
            <div class="login-info">
              <button @click="goNext">下一步</button>
            </div>
          </div>
          <div class="login-text">
            <span @click="userLogin">用户名密码登录</span> |
            <span>立即注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Toast } from 'mint-ui'
import http from '@/serveies/api/request'

export default {
  name: 'Login',
  data () {
    return {
      isShow: true,
      userName: '',
      userPwd: '',
      userTel: '',
      rules: {
        userName: {
          rule: /\S/,
          msg: '用户名或手机号不能为空'
        },
        userPwd: {
          rule: /^\w{6,11}$/,
          msg: '密码不能为空，且6-11位'
        },
        userTel: {
          rule: /^1[3456789]\d{9}$/,
          msg: '请输入正确手机号'
        }
      }
    }
  },
  methods: {
    ...mapMutations(['login']),
    userLogin () {
      this.isShow = !this.isShow
    },
    goNext () {
      if (!this.validate('userTel')) return
      this.$router.push({
        path: '/login-code',
        query: {
          tel: this.userTel
        }
      })
    },
    // 点击登录
    loginBtn () {
      // 通过验证
      if (!this.validate('userName')) return
      if (!this.validate('userPwd')) return
      // 发送请求
      http
        .$axios({
          url: '/api/login',
          method: 'POST',
          data: {
            userName: this.userName,
            userPwd: this.userPwd
          }
        })
        .then((res) => {
          Toast(res.msg)
          // 登录失败
          if (!res.success) return false
          // 登录成功 跳转页面 存储信息
          this.login(res.data[0])

          this.$router.push('/my')
        })
    },
    // 验证提示信息
    validate (key) {
      let bool = true
      if (!this.rules[key].rule.test(this[key])) {
        Toast(this.rules[key].msg)
        bool = false
        return false
      }
      return bool
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .login-header {
    width: 100%;
    height: 5.44rem;
    background: url("../assets/img/login.png") no-repeat center center;
    p {
      line-height: 5.44rem;
      text-align: center;
      font-size: 0.373333rem;
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .login-content {
    width: 100%;
    margin: 0.533333rem;
    h3 {
      font-size: 0.533333rem;
      padding-bottom: 0.533333rem;
    }
    .login-form {
      font-size: 0.48rem;
      input {
        width: 70%;
        padding: 0 0.533333rem;
        height: 1.333333rem;
        border-radius: 0.4rem;
        margin-bottom: 0.533333rem;
        background-color: #eee;
        border: 1px solid #eee;
      }
      .login-info {
        button {
          width: 80%;
          height: 1.2rem;
          border-radius: 0.533333rem;
          border: 1px solid #eee;
          background-color: rgba(11, 132, 255, 0.6);
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
    .login-text {
      width: 100%;
      margin-left: -0.693333rem;
      font-size: 0.32rem;
      text-align: center;
      margin-top: 0.533333rem;
      color: #666;
    }
  }
}
</style>
